import 'package:flutter/material.dart';
import 'package:x3_component_core/components/dialog_components/select_period_dialog.dart';

///**
///* @fileName: base_select_period_dropdown
///* @author: hrongyong
///* @date-time: 12/10/21 10:16 AM
///* @email: hrongyong@gmail.com
///* description:
///* <fileName> <author> <date-time> <email> <description>
///* 文件名 作者姓名 创建时间 作者邮箱 文件描述
///*/
class BaseSelectPeriodDropdown extends StatefulWidget {
  // 显示列表
  final List<String> periodList;

  //  默认选项
  final int selectPeriodIndex;

  // 自定义开始
  final DateTime customizeStart;

  // 自定义结束
  final DateTime customizeEnd;

  // 组件高度
  final double componentHeight;

  // 组件宽度
  final double componentWidth;

  // AppBar到组件顶部的距离
  final double reservedHeight;

  // 自定义是显示的样式
  final String Function(DateTime start, DateTime end) showCustomText;

  // 选中回调
  final Function(DateTime start, DateTime end) selectCallBack;

  // 显示文本位置
  final Alignment alignment;

  const BaseSelectPeriodDropdown({Key key, @required this.periodList, @required this.reservedHeight, @required this.selectCallBack, this.componentHeight = 48.0, this.componentWidth = double.infinity, this.showCustomText, this.selectPeriodIndex = 0, this.customizeStart, this.customizeEnd, this.alignment = Alignment.center}) : super(key: key);

  @override
  _BaseSelectPeriodDropdownState createState() => _BaseSelectPeriodDropdownState();
}

class _BaseSelectPeriodDropdownState extends State<BaseSelectPeriodDropdown> {
  int _selectPeriodIndex = 0;
  DateTime _customizeStart = DateTime.now();
  DateTime _customizeEnd = DateTime.now();

  /// 自定义的位置
  int get _customizeIndex => widget.periodList.indexWhere((element) => element == '自定义');

  @override
  void initState() {
    super.initState();
    if (widget.selectPeriodIndex != this._selectPeriodIndex) this._selectPeriodIndex = widget.selectPeriodIndex;
    if (widget.customizeStart != null) this._customizeStart = widget.customizeStart;
    if (widget.customizeEnd != null) this._customizeEnd = widget.customizeEnd;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: widget.componentHeight,
      width: widget.componentWidth,
      child: _buildButtonWidget(text: _salesPeriodShowText(), onTap: _onSelectSalesPeriodEvent),
    );
  }

  Widget _buildButtonWidget({@required String text, @required Function() onTap, Key key}) {
    return InkWell(
      onTap: onTap,
      child: Container(
        alignment: widget.alignment,
        child: Row(
          key: key,
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(Icons.keyboard_arrow_down, color: Colors.transparent),
            SizedBox(width: 4),
            _buildText(text),
            SizedBox(width: 4),
            Icon(Icons.keyboard_arrow_down),
          ],
        ),
      ),
    );
  }

  Widget _buildText(String text) {
    if (_selectPeriodIndex == _customizeIndex) return Expanded(child: FittedBox(child: Text(text, style: TextStyle(fontSize: 14, color: Colors.black54))));
    return Text(text, style: TextStyle(fontSize: 14, color: Colors.black54));
  }

  String _salesPeriodShowText() {
    if (_selectPeriodIndex == _customizeIndex) {
      String text = '';
      if (widget.showCustomText != null) {
        text = widget.showCustomText(_customizeStart, _customizeEnd);
      } else {
        text = widget.periodList[_selectPeriodIndex];
      }
      return text;
    }
    return widget.periodList[_selectPeriodIndex];
  }

  void _onSelectSalesPeriodEvent() {
    showDialog(
        context: context,
        barrierColor: Colors.transparent,
        builder: (BuildContext context) {
          return SelectPeriodDialog(selectPeriodIndex: _selectPeriodIndex, customizeStart: this._customizeStart, customizeEnd: this._customizeEnd, selectCallBack: _onSelectPeriodDialogCallBack, periodList: widget.periodList, reservedHeight: widget.reservedHeight + widget.componentHeight, customizeIndex: _customizeIndex);
        });
  }

  void _onSelectPeriodDialogCallBack(int selectPeriodIndex, DateTime start, DateTime end) {
    if (this._selectPeriodIndex != selectPeriodIndex) {
      setState(() {
        this._selectPeriodIndex = selectPeriodIndex;
      });
    }
    if (selectPeriodIndex == _customizeIndex) {
      setState(() {
        _customizeStart = start;
        _customizeEnd = end;
      });
    }
    DateTime _start = DateTime(start.year, start.month, start.day);
    DateTime _end = DateTime(end.year, end.month, end.day, 23, 59, 59, 999);
    widget.selectCallBack(_start, _end);
  }
}
